<template>
    <div class="li">
        <el-row :gutter="50" justify="space-between">
            <el-col :span="16" style="padding: 0px">
                <Header></Header>
                <div class="list">
                    <el-tabs v-model="state.activeName" @tab-click="handleClick">
                        <el-tab-pane label="任务列表" name="first">
                            <div class="lists">
                                <Task :type="5" :list="state.list" @detailurl="detailUrl" :total="state.total" @addtask="addTask" :admin_id="state.admin_id" :department_id="state.department_id"></Task>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane label="进行中" name="second">
                            <div class="lists">
                                <Task :type="5" :list="state.list" @detailurl="detailUrl" :total="state.total" @giveup="open" ></Task>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="pation" v-if="state.total > 4">
                        <el-pagination background layout="prev, pager, next" :total="state.total" page-size="5" @current-change="currentChange">
                        </el-pagination>
                    </div>
                </div>

            </el-col>
            <el-col :span="8" >
                <Right type="2"></Right>
            </el-col>
        </el-row>

    </div>
</template>
<script>
    import  { onMounted, reactive } from "vue";
    import Header from "@/components/common/header";
    import Right from "@/components/common/right";
    import Task from "@/components/common/task";
    import { getTypeList, receiveTask, typeTask, giveupTask } from "@/request/api";
    import { ElMessage,ElMessageBox } from 'element-plus'
    //?导入公共查询方法
    import {
        getAsyncRouteName
    } from "@/views/layoutpages/common";
    import {useRoute, useRouter} from "vue-router";
    const state = reactive({
        list: [],
        total: 0,
        activeName: 'first',
        status: 0,
        is_del: 0,
        id: 1,
        page: 1,
        admin_id: 0,
        department_id: -1
    })
    export default {
        name: "Login",
        components: {Header, Right, Task},
        setup() {
            const route = useRoute();
            const router = useRouter();
            const router_name = router.currentRoute.value.name
            let arr = router_name.split('-');
            if(arr[2] == 17){
                state.id = 2
            }
            if(arr[2] == 18){
                state.id = 3
            }
            if(arr[2] == 16){
                state.id = 1
            }

            //跳转
            const detailUrl = async (id,title,rec_id = 0) => {
                let path = "user/components/UsersEditRoute";
                const toName = await getAsyncRouteName(title, path, "edit", {
                    router,
                    route
                });
                router.push({ name: toName ,query: { id ,rec_id}});
            };
            const init = () => {
                if(state.status > 0){
                    tTask()
                }else {
                    let param = {
                        page: state.page,
                        pageSize: 4,
                        is_hall: 1
                    }

                    getTypeList(param).then(res => {
                        state.list = res.data.data;
                        state.total = res.data.total
                        let userpar = localStorage.getItem('user')
                        let user = JSON.parse(userpar);
                        state.department_id = user.department_id
                        state.admin_id = user.id
                    })
                }
            }
            const currentChange = (e) => {
                if(e == state.page){
                    return false
                }
                state.page = e
                init()
            }
            onMounted(async () => {
                init();
            })

            //切换
            const handleClick = (tab, event) => {
                state.page = 1
                state.status = tab.index
                if(tab.index > 0 && tab.index!=3){
                    state.task_type = state.id
                    //进行中
                    tTask()
                }else{
                    init()
                }
            }

            const tTask = () => {
                let param = {
                    page: state.page,
                    pageSize: 4,
                    task_type: state.task_type,
                    status: state.status
                }

                typeTask(param).then(res => {
                    state.list = res.data.data;
                    state.total = res.data.total
                })
            }
            //领取任务
            const addTask = (id,index) => {
                let param = {
                    task_id: id
                }
                receiveTask(param).then(res => {
                    if(res.ret === 200){
                        ElMessage.success({
                            message: '领取成功',
                            type: 'success'
                        })
                        setTimeout(function () {
                            state.list[index].recStatus = 1
                            state.list[index].rec_id = res.data
                        },500)
                    }else{
                        ElMessage.error(res.msg);
                    }
                })
            }
            const open = (id) => {
                ElMessageBox.confirm(
                    '确定要放弃该任务吗?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        let param = {
                            task_id: id,
                            status: 3
                        }
                        giveupTask(param).then(res => {
                            if(res.ret === 200){
                                ElMessage({
                                    type: 'success',
                                    message: '操作成功',
                                })
                                tTask();
                            }else{
                                ElMessage({
                                    type: 'error',
                                    message: res.msg,
                                })
                            }
                        })
                    })
                    .catch(() => {
                    })
            }

            return {
                activeName: 'first',
                list: [
                    {
                        id: 1
                    },
                    {
                        id: 2
                    }
                ],
                detailUrl,
                init,
                state,
                currentChange,
                addTask,
                open,
                handleClick
            };
        }
    };


</script>
<style scoped>
    .list {
        margin-left: 27px;
    }
    .pation {
        text-align: center;
        background: white;
        padding: 15px;
    }

</style>
